<template>
  <dv-border-box1 class="mainWidth" :color="dataVThem.color" :backgroundColor="dataVThem.bgColor">
    <div class="footer">
      <div style="padding: 0;">
        <div class="footer_tit">
          <div class="footer_img">
            <img src="../assets/icon1.png" alt="">
            100%验货质检
          </div>
          <div class="footer_img">
            <img src="../assets/icon2.png" alt="">
            每天10点开抢
          </div>
          <div class="footer_img">
            <img src="../assets/icon3.png" alt="">
            七天包退
          </div>
          <div class="footer_img">
            <img src="../assets/icon4.png" alt="">
            正品保证
          </div>
          <div class="footer_img">
            <img src="../assets/icon5.png" alt="">
            闪电发货
          </div>
        </div>
        <div class="footer_center">© 2019-2029 智能云版权所有&nbsp;&nbsp;|&nbsp;&nbsp;关于我们&nbsp;&nbsp;</div>
        <div class="footer_company">技术支持:&nbsp;&nbsp;&nbsp;智能云有限公司</div>
        <div class="footer_company"><a href="https://www.beian.gov.cn/portal/recordQuery?token">{{
            total.mch_info.mch_ga
          }}</a> &nbsp;&nbsp;&nbsp;<a href="http://beian.miit.gov.cn/">{{ total.mch_info.mch_icp }}</a></div>
        <div style="display: flex;align-items: center;justify-content: center">
          <img v-for="(item, key1) in footer_imgs" @click="goToUrl(key1)" :src="item" style="width: 10%;margin-left: 20px;margin-right: 20px">
        </div>

        <div class="footer_company" id="build_version">构建版本</div>
      </div>
    </div>
  </dv-border-box1>
</template>
<script>
// import dataVThem from '@/assets/data-v/config.js'
import {totalapi} from "../api/http";

const TOTAL_DEFAULT = {mch_info: {}}
export default {
  data() {
    return {
      total: Object.assign({}, TOTAL_DEFAULT),
      wrapper: '',
      footer_imgs: []
      // dataVThem
    }
  },
  async created() {
    if (sessionStorage.getItem('total') === null) {
      const res1 = await totalapi()
      if (res1.data.code === 200) {
        sessionStorage.setItem('total', JSON.stringify(res1.data.data))
        this.footer_imgs = res1.data.data.mch_info.pc_params.footer_imgs;
      } else {
        this.$message(res1.data.msg)
      }
    } else {
      this.footer_imgs = JSON.parse(sessionStorage.getItem('total')).mch_info.pc_params.footer_imgs;
    }
    this.$EventBus.$on('total', msg => {
      this.total = Object.assign({}, TOTAL_DEFAULT, msg)
      this.footer_imgs = this.total.mch_info.pc_params.footer_imgs;
    });
  },
  mounted() {
  },
  methods: {
    goToUrl(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url('~@/assets/style/var.less');

.mainWidth {
  width: @main-width;
  margin: 0 auto;
}

.footer {
  padding: 30px 0;
  box-sizing: border-box;
  width: 100%;
  width: calc(~"100% - 2vw");
  margin-left: 1vw;
  margin-right: 1vw;

  .footer_tit {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 30px;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom: 30px;

    .footer_img {
      flex: 1;
      font-weight: 700;
      font-size: 20px;
      line-height: 34px;
      color: #292929;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }
  }

  .footer_center {
    font-weight: 900;
    font-size: 14px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #9A9A9A;
  }

  .footer_company {
    font-weight: 900;
    font-size: 14px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #9A9A9A;
  }
}
</style>
